<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>#{bundle.JugandoA}</title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
        
        <script type="text/javascript">
        var wsocket;    // Websocket connection
        var numEsc;   // User's name
        var n;
        var panel;   // Chat area
        var posX;
        var posY;
        /* Connect to the Websocket endpoint
        * Set a callback for incoming messages */
        function connect() {
            n=0;
            numEsc=0;
            panel = document.getElementById("panelDeImagen");
            wsocket = new WebSocket("ws://localhost:8080/PruebaBBDD12/websocketjuego");
            wsocket.onmessage = onMessage;
            wsocket.onerror = onError;
        }
        /* Callback function for incoming messages
        * evt.data contains the message
        * Update the chat area, user's area and Websocket console */
        function onMessage(evt) {
            n=n+1;
            /* Parse the message into a JavaScript object */
            var msg = JSON.parse(evt.data);
            numEsc=msg.escenario;
            var imagen="data:image/png;base64,"+numEsc;
            panel.setAttribute("src", imagen);
        }
        
        function onError(evt) {
            Alert("oho!.. error:" + evt.data);
        };
        
        /* Send a join message to the server */
        function send() {
            var jsonstr;
            /* Create a message as a JavaScript object */
            var msg = {};
            msg.escenario = n;
            msg.posx = posX;
            msg.posy = posY;
            /* Convert the message to JSON */
            jsonstr = JSON.stringify(msg);
            /* Send the JSON text */
            wsocket.send(jsonstr);
        }
        
        function coords(event)
        {
            var rect= panel.getBoundingClientRect();
            var x=(event.clientX - rect.left);
            var y=(event.clientY - rect.top);
            
            var ancho=panel.clientWidth;
            var alto= panel.clientHeight;
            posX=Math.floor((x*1000)/ancho);
            posY=Math.floor((y*1000)/alto);
            send();
        }

        /* Call connect() when the page first loads */
        window.addEventListener("load", connect, false);
        </script>
        
    </h:head>
    <h:body>
        <div class="cabecera">
            <div class="logo">
                <h1>DrawAdventures</h1>
            </div>
            <div class="usuario">
                <h:form>
                <h:panelGrid columns="1" rendered="#{login.loggedIn}">
                    <h:form rendered="#{login.loggedInUser}">
                        <h:outputLabel for="username">Hola: #{login.usuario.nombreUsuario}</h:outputLabel>
                    </h:form>
                    
                    <h:form rendered="#{login.loggedInAdmin}">
                        <h:outputLabel for="admin">Hola: #{login.admin.nombreAdmin}</h:outputLabel>
                    </h:form>

                </h:panelGrid>
                <h:panelGrid columns="2" rendered="#{!login.loggedIn}">

                    <h:outputLabel for="username">Username:</h:outputLabel>

                    <h:inputText id="username" value="#{credenciales.username}"/>

                    <h:outputLabel for="password">Password:</h:outputLabel>

                    <h:inputSecret id="password" value="#{credenciales.password}"/>

                </h:panelGrid>

                <h:panelGrid columns="2">
                <h:commandButton value="Login" action="#{login.doLogin}" rendered="#{!login.loggedIn}"/>
                
                <h:commandButton value="Registrate" action="#{usuariosMainController.prepareCreate}" rendered="#{!login.loggedIn}"/>

                <h:commandButton value="Logout" action="#{login.logout}" rendered="#{login.loggedIn}"/>
                                
                <h:commandButton value="Perfil" action="#{usuariosMainController.prepareView()}" rendered="#{login.loggedInUser}"/>
                    
                <h:commandButton value="Panel Admin" action="/administrador/PanelAdmin" rendered="#{login.loggedInAdmin}"/>
                
                </h:panelGrid>

            </h:form>
            </div>
        </div>
        
        <div class="contenedor">
            <div class="cuerpo">
                <br />
                <br />
                <img id="panelDeImagen" onmousedown="coords(event);" border="0" src="#{resource['img/0-es.png']}" width="50%" />
            </div>
        </div>
    </h:body>


</html>